<!--
 * @Date: 2023-02-15 10:31:38
 * @LastEditTime: 2023-06-22 22:49:26

 * 介绍:
-->
<script lang="ts" setup>
import { BorderStyle } from "@@/components/types/index";
const props = withDefaults(
  defineProps<{
    /**是否禁用 */
    disabled?: boolean;
    value: any;
    activeColor?: string;
    activeBorderColor?: string;
    activeBg?: string;
    activeBorderStyle?: BorderStyle;
    activeBorderWidth?: string;
  }>(),
  {
    activeBg: "var(--C-M1)",
    activeColor: "var(--C-white)",
    activeBorderColor: "var(--C-M1)",
    activeBorderStyle: "solid",
    activeBorderWidth: "1rem",
  }
);
</script>

<template>
  <VanRadio
    :style="{
      '--RradioBtn-activeBg': props.activeBg,
      '--RradioBtn-activeColor': props.activeColor,
      '--RradioBtn-activeBorderStyle': props.activeBorderStyle,
      '--RradioBtn-activeBorderWidth': props.activeBorderWidth,
      '--RradioBtn-activeBorderColor': props.activeBorderColor,
    }"
    class="RradioBtn"
    :name="props.value"
    :disabled="props.disabled"
  >
    <template #icon="{ checked }">
      <slot :checked="checked"></slot>
    </template>
  </VanRadio>
</template>

<style lang="scss" scoped>
.RradioBtn {
  margin-right: initial;
  border-radius: 11rem;
  border: var(--C-T1) 1rem solid;
  height: auto !important;
  overflow: visible !important;
  padding: 0.45em;
  flex: 1;
  text-align: center;
  :deep(.van-radio__icon) {
    height: auto !important;
    flex: 1;
  }
}
.van-radio--disabled {
  opacity: 0.4;
}
[aria-checked="true"] {
  color: var(--RradioBtn-activeColor) !important;
  border-color: var(--RradioBtn-activeBorderColor) !important;
  background: var(--RradioBtn-activeBg) !important;
  font-weight: 600 !important;
  border-style: var(--RradioBtn-activeBorderStyle) !important;
  border-width: var(--RradioBtn-activeBorderWidth) !important;
}
</style>
